jsplumb插件更改线条颜色

最新推荐文章于 2025-07-07 11:02:30 发布

吕驴驴

最新推荐文章于 2025-07-07 11:02:30 发布

阅读量6.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端插件文章标签： jsplumb 前端技术插件线条

本文链接：https://blog.csdn.net/weixin_44369335/article/details/90513126

前端插件专栏收录该内容

18 篇文章

订阅专栏

博客给出一个主要代码示例，展示了使用jsplumb插件实现特定效果。通过弹窗选择属性，在确定后可改变连线颜色，为前端开发提供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

此示例为主要代码，仅供参考

		// 通过registerConnectionType定义样式，使用setType应用样式
         jsPlumb.registerConnectionType('custom', {setting})
         连线.setType('custom')

		示例：
			// 初始化jsplumb
		 	let jsplumb = this.$jsPlumb.getInstance()
		 	// 定义初始样式
		 	let config = {
			    paintStyle: {stroke: '#6C8AB6', strokeWidth: 1},
			    connectorStyle: {stroke: '#6C8AB6', strokeWidth: 1},
			    connectorHoverStyle: {stroke: '#6C8AB6', strokeWidth: 3 },
			    hoverPaintStyle: { stroke: '#6C8AB6', strokeWidth: 3 }
		 	}
		 	// 设置连线
		 	let c = jsplumb .connect({
	            source: sourceId,
	            target: targetId
            }, config)
            // 定义新样式
            let setting = {
			    paintStyle: {stroke: '#E9BE37', strokeWidth: 1},
			    connectorStyle: {stroke: '#E9BE37', strokeWidth: 1},
			    connectorHoverStyle: {stroke: '#E9BE37', strokeWidth: 3 },
			    hoverPaintStyle: { stroke: '#E9BE37', strokeWidth: 3 }
		  	}
		  	// 应用新样式
	         jsPlumb.registerConnectionType('custom', setting)
	         c.setType('custom')